<template>
  <div>
    <input type="text" v-model="searchText" @input="handleInput" />
    <ul v-if="showDropdown">
      <li v-for="item in filteredOptions" :key="item.id" @click="selectOption(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
    const searchText = ref('');
    const options = reactive([
      { id: '1', name: '北京大学' },
      { id: '2', name: '山东大学' },
      { id: '3', name: '清华大学' },
      // Add more options as needed
    ]);
    const showDropdown = ref(false);
    const filteredOptions = ref([]);
    const emits = defineEmits(['selectOption']);

    const handleInput = () => {
      showDropdown.value = true;
      filteredOptions.value = options.filter((option) =>
        option.name.toLowerCase().includes(searchText.value.toLowerCase())
      );
    };

    const selectOption = (option) => {
      // searchText.value = option.name;
      showDropdown.value = false;
      emits('selectOption', option)
    };

    watch(searchText, () => {
      if (searchText.value === '') {
        showDropdown.value = false;
      }
    });

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
